<div style="min-width:930px; position: relative;">
    <h1 mat-dialog-title style="display:inline-block;cursor: move;" mat-dialog-draggable>{{'device-tag-dialog-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">
        clear
    </mat-icon>
    <mat-table #table [dataSource]="dataSource" matSort style="height:620px" class="dialog-mdsd-table">
        <!-- Checkbox Column -->
        <ng-container matColumnDef="toogle">
            <mat-header-cell *matHeaderCellDef style="padding-left: 5px;padding-right: 10px;">
                <button mat-icon-button (click)="onClearSelection()" class="remove">
                    <mat-icon>clear</mat-icon>
                </button>
            </mat-header-cell>
            <mat-cell *matCellDef="let element" style="padding-left: 15px;">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="onToogle(element)" [(ngModel)]="element.checked">
                </mat-checkbox>
            </mat-cell>
        </ng-container>        
        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header class="my-header-filter"> 
                {{'device.list-name' | translate}}
                <input (click)="$event.stopPropagation()" [formControl]="nameFilter" style="width: 200px" class="my-header-filter-input" type="text">
            </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
        </ng-container>
        <!-- Address Column -->
        <ng-container matColumnDef="address">
            <mat-header-cell *matHeaderCellDef mat-sort-header class="my-header-filter"> 
                {{'device.list-address' | translate}} 
                <input (click)="$event.stopPropagation()" [formControl]="addressFilter" style="width: 360px" class="my-header-filter-input" type="text">
            </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.address}} </mat-cell>
        </ng-container>
        <!-- Device Column -->
        <ng-container matColumnDef="device">
            <mat-header-cell *matHeaderCellDef mat-sort-header class="my-header-filter"> 
                {{'device.list-device' | translate}} 
                <input (click)="$event.stopPropagation()" [formControl]="deviceFilter" style="width: 200px" class="my-header-filter-input" type="text">
            </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.device}} </mat-cell>
        </ng-container>
        <!-- Select Column -->
        <ng-container matColumnDef="select">
            <mat-header-cell *matHeaderCellDef style="padding-right: 0px;">
            </mat-header-cell>
            <mat-cell *matCellDef="let element" style="padding-right: 0px;">
                <button mat-icon-button (click)="onSelect(element)">
                    <mat-icon>check</mat-icon>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="defColumns" style="min-height: 30px;"></mat-header-row>
        <mat-row *matRowDef="let row; columns: defColumns;"></mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[10, 25, 100]" [pageSize]="25" style="float: left;"></mat-paginator>

    <div mat-dialog-actions class="dialog-action" style="padding-top: 30px;">
        <button mat-raised-button (click)="onNoClick()" cdkFocusInitial>{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()">{{'dlg.ok' | translate}}</button>
    </div>
</div>